<script>
import { getProList } from '@/api/pro'

import ExportJsonExcel from 'js-export-excel'

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1
    }
  },
  mounted() {
    getProList().then(res => {
      // console.log(res.data)
      this.tableData = res.data
      console.log(this.tableData)
    })
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData() {
      return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  },
  methods: {
    exportClick() {
      // 1.创建导出对象
      // 文件配置
      let option = {}
      //配置导出文件名字
      option.fileName = 'proList'
      //配置需要导出的内容
      option.datas = [
        {
          //需要导出的数据源
          sheetData: this.tableData,
          //工作表名称
          sheetName: '工作表1',
          //需要导出数据源中的哪些字段
          sheetFilter: ['brand', 'category', 'desc', 'proname', 'originprice', 'img1'],
          //这些被导出的字段标题叫什么
          sheetHeader: ['品牌', '分类', '描述', '商品名称', '商品价格', '产品图片'],
          //导出后的宽度
          columnWidths: [5, 5, 10, 20, 30, 40]
        }
      ]

      //将内容创建成excel
      let toExcel = new ExportJsonExcel(option)
      //保存excel
      toExcel.saveExcel()
    }
  }
}
</script>
<template>
  <div>
    <!-- 
      文件导出分两种方法
      第一种:直接 a 标签即可
      a标签可以下载文件
      <a href="https://unpkg.com/vue@3/dist/vue.global.js " target="_blank">下载vue</a>

      第二种方法,自己处理完数据后将数据保存到本地
      


     -->
    <el-button @click="exportClick" type="primary" plain>Excel文件导出</el-button>

    <el-table :data="computedTableData" style="width: 100%">
      <el-table-column type="index" :index="(currentPage - 1) * 10 + 1" label="序号" width="60px" align="center"></el-table-column>
      <el-table-column prop="proname" label="商品名称" width="400px" align="center" />
      <el-table-column prop="category" label="商品类型" width="100px" align="center" />
      <el-table-column prop="brand" label="商品品牌" width="100px" align="center" />
      <el-table-column prop="originprice" label="商品原价" width="100px" align="center" />
      <el-table-column prop="discount" label="商品折扣" width="100px" align="center" />
      <el-table-column prop="sales" label="商品现价" width="100px" align="center" />
      <el-table-column prop="stock" label="商品库存" width="100px" align="center" />
      <el-table-column label="商品图片1" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img1"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片2" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img2"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片3" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img3"></el-image>
        </template>
      </el-table-column>>
      <el-table-column label="商品图片4" align="center" width="200px">
        <template #default="scope">
          <el-image :src="scope.row.img4"></el-image>
        </template>
      </el-table-column>>

    </el-table>

    <!-- ------------------做分页显示用的------------------------ -->
    <el-pagination background layout="prev, pager, next" :total="tableData.length" v-model:current-page="currentPage" />

  </div>
</template>